Typescript 시작
타입스크립트의 기본은 변수와 함수에 타입이라는 제약을 부여해 강제성을 높인다. 변수나 함수의 값이나 결과의 형태를 고정하여 추적 및 유지보수성을 높이는데에 있다. 어떤 타입이 존재하며, 어떤식으로 선언하여 사용하는지 알아보자.
.ts 파일
타입스크립트로 작성된 코드는 .ts 확장자를 갖는다. 어렵게 생각할 필요없이 자바스크립트에 타입을 부여하는 문법을 사용할 수 있는 형태라고 생각하면 쉽다. 기본 변수, 함수 선언 및 실행 등 기존에 .js에서 사용하던 방법 그대로 사용하면 된다.
변수 타입
String 타입
작은따옴표('), 큰따옴표(")로 감싸지는 문자열 타입이다.
let carrotName:string = 'carrots';
let text1:string = "My name is " + carrotName;
let text2:string = `My name is ${carrotName}`;Boolean 타입
참(true) / 거짓(false) 을 표현하는 타입이다. 특이사항 없다.
let isBoolean: boolean = false;Number 타입
실수, 정수에 대한 구분없이 사용하는 자바스크립트처럼 숫자형 데이터는 전부 포함한다. 16진수, 10진수, 2진수, 8진수 리터럴도 지원한다.
let num: number;
let integer: number = 6;
let float: number = 3.14;
let hex: number = 0xf00d; // 61453
let binary: number = 0b1010; // 10
let octal: number = 0o744; // 484
let infinity: number = Infinity;
let nan: number = NaN;Union 타입 (다중 타입)
타입스크립트도 개발에 있어 융통성을 발휘할 수 있다. 2개 이상의 타입을 허용하여 사용하는 형태다.
// 파이프(|)로 구분하여 작성한다. 여러 개가 올 수 있음.
let union: string | number;
union = 'carrtos';
union = 123;Array 타입
연속된 데이터에 대한 타입도 지정할 수있다. 2가지 방법으로 선언을 지원한다.
let arr1: string[] = [ 'carrtos', 'durian', 'apple' ];
let arr2 Array<string> = [ 'carrtos', 'durian', 'apple' ];
// 타입별 배열 제공
let strs:string[] = [ 'carrtos', 'durian', 'apple' ];
let bools:boolean[] = [ true, false, true ];
let nums:number[] = [ 1, 2, 3 ];👽 여러 개의 타입이 들어오는 배열의 경우는 다음과 같이 선언해주면 된다.
// any라는 타입은 뭐든 상관없다. 라는 뜻이다.
let someArr: any[] = [ false, 0, {}, 'aa' ];
// 특정 타입을 제한하여 사용할 수 있다. 유니온 타입이라고 부른다.
let selects:(number | string)[] = [ 'aa', 123 ];Tuple 타입
Array의 서브타입으로 DB의 Tuple과 같은 의미다. 각 속성의 순서가 있고 그 순서에 따라 타입을 지정해서 사용하는 방식이다.
let tuple: [number, string, boolean] = [ 1, 'carotts', true ];
// DB애서 Record를 조회한다면 다음같은 구조를 띌 수 있을 것이다.
let records: Array<[number, string, boolean]>;
records = [[ 1, 'carotts', true ], [ 1, 'carotts', true ]];Object 타입
기본적으로 typeof 연산자가 object로 반환하는 모든 타입을 뜻한다. 하지만 그대로 사용하는 경우는 거의 없다. 무슨 말이냐면
// 이런식으로 쓴다고 능사가 아니란 뜻이다.
let obj: object = {};
let arr: object = [];보통 Object는 key, value 구조를 띈 데이터로 사용할 때 쓴다. 모든 속성에 타입을 부여해서 사용해야 한다.
let info: { age : number } = { age : 20 };
let project :{
member : string[],
days : number,
started : boolean,
} = {
member : ['kim', 'park'],
days : 30,
started : true,
}👽 같은 형태의 데이터가 연속되는 구조가 많기때문에 이렇게 변수마다 선언하면 가독성이 떨어지는 것은 사실이다. 이를 위해 타입스크립트는 type 리터럴이라고 불리우는 alias 기능과 interface 라는 문법을 지원한다. (딥하게 들어가면 설명할 것이 많기 때문에 다음 포스팅에서 다루겠다. 대충 이런식으로 한다~ 는 것만 보고 넘어가자)
type user = {
name: string,
age: number
};
interface user2 {
name: string,
age: number
};
let carttos: user = {
name: 'carttos',
age: 29
};Any 타입
any 타입은 단어 의미 그대로 모든 타입에 대해서 허용한다는 의미이다. 사실상 기본 자바스크립트의 모든 변수는 any 타입을 따른다고 보면 쉽다.
let info: any = 'carrots';
info = 123;
info = undefined;
info = [];any 타입은 많이 써서는 안된다. 그럼 타입관련 버그가 생길 경우 왜 그런지 추적하기가 어려워지고 타입 실드를 안씌우면 타입스크립트를 쓰는 이유가 없기 때문이다.
Unknown 타입
any와 비슷하게 특정 형태가 없는 타입이다.
let info: unknown = 'carrots';
info = 123;
info = undefined;
info = [];👽 any와 unknown의 차이
- any : 어떤 타입도 허용
- unknown : 정해져있지 않음
이 둘의 가장 큰 차이는 타입스크립트상 엄격함이다.
예시를 보면 똑같은 기능을 한다고 설명했던 두 타입으로 변수를 선언하고 length를 출력하는 코드를 작성했다. 실행하면 다음과 같은 결과로 이어진다.
let anyData : any = 10;
console.log(anyData.length); // undefined
let unknownData : unknown = 'carrtos';
console.log(unknownData.length); // syntax erroranyData 변수는 number 형태로 length 메소드를 지원하지 않는다. 하지만 문법 오류는 발생하지 않고, undefined만 반환한다. 하지만 unknownData 변수는 string 형태임에도 실행 전부터 에디터상에서 오류를 확인할 수 있을 것이다. 왜일까? 말 그대로 Unknown 타입이 더 엄격하기 때문이다. 아직 할당되기 전이기 때문에 해당 변수는 어떤 타입인지 알 수 없다. 그렇기 때문에 실행 조차 할 수 없는 것이다.
Null / Undefined 타입
타입스크립트또한 자바스크립트의 슈퍼셋이기 때문에 자바스크립트에서 지원하는 모든 타입을 지원한다. 따라서 자바스크립트의 undefined 타입또한 타입으로 제공된다.
let nulld: null = null;
let undefinedd: undefined = undefined;👽 Null / Undefined 타입은 모든 타입의 하위 속성이다. 한마디로
// ! tsconfig.json에 strick를 끈 상태에서 가능
let num: number = undefined; // 이렇게 된다는 얘기다.정리하며
오늘은 타입스크립트의 타입에 대해 알아봤다. 추가적으로 Never, void, type, interface등 있는데 추후 포스팅에서 자세히 다뤄보겠다. 시작하는 단계라면 이정도 타입만으로도 구조를 잡을 수 있을거라 본다.
오늘 저녁은 비빔밥이다. 🥕
