[스타이퍼팩토리] 1일차_타입스크립트 기본&함수 타입

 

타입스크립트는 자바스크립트의 확장 언어이다. 즉, 자바스크립트에서 다루는 값에 타입을 부여하는 것이다.

 

1. 기본 타입

• string
• number
• boolean
• object
• Array (대문자 주의)
• tuple
• any
• null
• undefined

 

기본 자료형

let str:string="A";  //기본 타입
let str2:String="A"; //String이라는 인스턴스 객체

let num:number=10;  //기본 타입
let num2:Number=10; //Number라는 인스턴스 객체

let bol:boolean=true;
let und:undefined=undefined;
let nul:null=null;
let sym:symbol=Symbol();

 

 

배열

Array 타입은 배열 타입, tuple 타입은 특정 형태를 갖는 배열을 의미한다.

// 숫자 요소만 담긴 배열
let arr:number[]=[10,20];  //배열의 요소가 number라고 정의해줘야 함

// 문자열 요소만 담긴 배열
let arr2:string[]=["A","B"];  //string 요소만 할당 가능

// 문자랑 숫자랑 섞인 배열
let arr3:(string|number)[]=[10,"A","B",20];

//tuple
let arr4:[number,string]=[10,"A"];  // 첫 번째 요소는 문자열이고, 두 번째 요소는 숫자형

 

 

객체

객체 타입은 Object 타입이다.

let obj:{name:string; age:number,gender:string}
={name:"Lynn", 
age:22,
gender:"female"};

 

 

any

any 타입은 타입스크립트에서 모든 타입을 허용하겠다는 의미이다.

단, any 타입을 사용할 거면 타입스크립트를 사용하는 의미가 없다는 부정적인 시선이 있기 때문에 지양해야 한다.

const arr:any = 10;

 

 

※ 연습 문제

Q. 다음 배열의 타입을 지정하기

const arr = [1, 2, 3];
const arr2 = [1, [2, 3], 4];
const arr3 = [
  [
    [1, 2],
    [3, 4],
    ["a", "b"],
  ],
  [
    [5, 6],
    [7, 8],
    ["c", "d"],
  ],
];

 

A.

const arr: number[] = [1, 2, 3];
const arr2: [number, number[], number] = [1, [2, 3], 4];
const arr3: [number[], number[], string[]][] = [
  [
    [1, 2],
    [3, 4],
    ["a", "b"],
  ],
  [
    [5, 6],
    [7, 8],
    ["c", "d"],
  ],
];
const arr4: [[number[], number[], string[]], [number[], number[], string[]]] = [
  [
    [1, 2],
    [3, 4],
    ["a", "b"],
  ],
  [
    [5, 6],
    [7, 8],
    ["c", "d"],
  ],
];

 

 

1. 함수 타입

타입스크립트의 함수와 객체에는 매개 변수와 반환값 모두에 타입을 지정할 수 있다.

//함수 선언문
function sum(n1:number,n2:number):number{
return n1+n2;
}

sum(10,20);

//함수 표현식
const sum2=function sum(n1:number,n2:number):number{
return n1+n2;
}

const sum3:(n1:number,n2:number)=>number=function sum(n1,n2){
    return n1+n2;
}

 

//객체
//함수 시그니처
//함수 객체 -> 일급 객체(자바스크립트 함수 일급객체)

const sum4:{(n1:number,n2:number):number}=(n1,n2)=>n1+n2;

 

 

옵셔널 파라미터

 ? 기호로 표시하며, ? 기호로 표시하면 타입으로 지정한 매개 변수를 생략할 수 있다.

//객체 타입 톺아보기
//읽기 전용 속성 -> Readonly
//옵션(옵셔널) 속성 -> ?

let user:{
    readonly name:string,
    age:number,
    gender?:string
}={
    name:"Lynn",
    age:22,
};

 

 

※ 연습 문제

Q1. 다음 함수의 타입을 지정하기

• 두 숫자를 더하고 결과를 반환하는 함수
• 문자열을 받아서 문자열을 반환하는 함수
• 불리언 값을 인자로 받아서 아무것도 반환하지 않는 함수 (void 반환)
• 문장에서 가장 긴 단어를 반환하는 함수 (string , 배열아님)
  • function longText(str) {} ; “Hello, World”

 

A.

//두 숫자를 더하고 결과를 반환하는 함수
const add=(n1:number,n2:number):number=>n1+n2;
const add2:(n1:number,n2:number)=>number=(n1,n2)=>n1+n2;

function add3(n1:number,n2:number):number{
  return n1+n2;
}

//문자열을 받아서 문자열을 반환하는 함수
const greet=(name:string):string=>`Hello,${name}`;

//불리언 값을 인자로 받아서 아무것도 반환하지 않는 함수(void 반환)
const isLogin=(status:boolean):void=>{
  console.log(status ? "login success":"login failed");
};

//문장에서 가장 긴 단어를 반환하는 함수(string, 배열 아님)
//배열의 sort 메서드는 단어들을 길이에 따라 내림차순으로 정렬
//두 단어의 길이를 비교하는데, 길이가 더 긴 단어가 앞에 오도록 함
const getLongString=(value:string)=>{
  return value.split(" ").sort((a,b)=>b.length-a.length)[0];
};

console.log(getLongString("a bd def adfhd"));

 

 

 

Q2. 암스트롱 수

/*
[연습문제 - 암스트롱 수 구하기]
난이도 ★★★★★

100부터 999까지 암스트롱 수를 구하세요 

&암스트롱 수란?

암스트롱의 수는 세 자리의 정수 중에서 각 자리의 수를 세 제곱한 수의 합과 자신이 같은 수를 말합니다. 
예를 들어 153 = 1 + 125 + 27 입니다. 
이와 같은 수를 암스트롱의 수라고 말합니다.

153 -> 1, 5 ,3
*/

 

 

A.

//매개변수가 암스트롱 수면 true, 아니면 false를 반환하는 함수
//reduce는 배열의 요소들을 순차적으로 처리하여 하나의 값을 반환하는 메서드

function isArmstrongNumber(num:number):boolean{
  //100 -> "100"->["1","0","0"]->[1,0,0]
 const digits=num.toString().split("").map(Number); //문자열 배열 -> 숫자열 배열로 변경
 const sumOfCubes=digits.reduce((sum,digit)=>sum+Math.pow(digit,3),0);
 return num===sumOfCubes;
}

  //암스트롱 수 출력
 function printArmstrongNumber(){
  for(let i=100;i<=999;i++){
    if(isArmstrongNumber(i)){
      console.log(i);
    }
  }
 }

printArmstrongNumber();

 

 

 

 

출처 : [수코딩(https://www.sucoding.kr)]