TypeScript 기본 문법 정리
Type을 지정하는 방법
:TypeName
// String Type
let who :string = 'jiyaho';
// Number Type
let num :number = 456;Union Type
// =====Union Type=====
// Union type: 2개 이상 타입의 혼용을 허용하는 새로운 타입을 만들어 줌
let test1 :string | number = 123;
let test2 :string | number = 'whatever';
let test3 :{ a : string | number } = { a : 123 };
let test4 :string[] | number = 123; // string type의 array 혹은 number type
// 소괄호를 이용한 Union type 사용
// string type 혹은 number type의 array
let test5 :(string | number)[] = [1,2,'hello',3]
// union type에는 수학 연산이 불가능함
let age :string | number;
age + 1; // Error
age + 'abc'; // Error
// age라는 변수는 하나의 타입이 아닌 string 또는 number라는 union type이기에
// 타입 제한을 엄격히 하는 타입스크립트에서는 허용하지 않음.Type을 변수에 담아 사용하기
// =====Type을 변수에 담기=====
// Type을 변수에 담아 쓸 수 있음 (cf. 타입명은 통상적으로 첫글자를 대문자로 많이 작성 함)
type MyType = string | number;Any Type
// =====Any Type=====
// Any type: 모든 유형의 타입 입력 가능 (type 체크 해제 문법)
let member :any;
member = 123;
let ttt :string = member; // type 체크 기능이 해제 됨
// (member는 위에서 123이라는 number type의 데이터를 입력하였고
// 타입이 불일치되면서 타입 제한 기능 자체가 해제 되어 버린다.) Unknwown Type
// =====Unknown Type=====
// Unknown type: any type과 비슷한 기능을 하나, 타입의 체크 기능 자체를 해제하진 않음.
let memo :unknown;
memo = 'john';
let rrr :number = memo // Error 발생. 위에 memo라는 변수에 'john'이라는
// string 타입의 데이터를 입력 했으므로, unknown type은 any type과 다르게
// type 명시 기능 자체를 해제하지는 않으므로 좀 더 안정성 있다.
let memo2 :unknown = 1;
memo2 - 1; // Error 발생.
// memo2에 숫자로 데이터를 입력해주어도 unknown type에는 수학 연산 불가능.
// (연산 또한 타입이 일치해야 가능하다)Array
// =====Array=====
// Array 안에 String Type만 허용
let names :string[] = ['kim', 'park'];
// Array에 Tuple type 지정하기
// 첫번째 인자는 number type, 두번째 인자는 boolean type으로 지정
type Member = [number, boolean]; // type을 변수에 담아 사용할 수 있음
let jane :Member = [30, true]; // 옳은 예시
let john :Member = ['name', 40]; // 틀린 예시Object
// =====Object=====
// Object 자료를 Obeject Type으로 지정하기
let fruit :{ name : string } = { name : 'apple'};
// Object 자료 속성에 옵션 '?' 부여하기 (해당 속성이 없어도 에러 미발생)
let people :{ name? : string } = { name : 'gugu'};
// Object 속성이 많지 않을 때
type Person = {
name : string,
age : string
};
let person1 :Person = { name : 'yoon', age : '30' };
// 만약 Object 속성이 많을 때, key로 모든 object의 속성 타입을 지정할 수 있음
// 모든 Object속성(key)의 타입을 string으로 지정
type NewPerson = {
[key :string] : string,
};
let person2 :NewPerson = { name : 'kim', age : '40' };Function
// =====Function=====
// 함수에 type 지정 (함수의 파라미터와 리턴 값에 2군데 모두 타입을 지정할 수 있음)
// 예시) Parameter x의 Type은 number, return값의 Type도 number로 지정
function myFunc1(x :number) :number {
return x * 2
};
// 함수에서 쓸 수 있는 Void Type
// 함수를 사용하면서 값을 return하고 싶지 않은 경우
function myFunc2(x :number) :void {
return x + 1 // Error 발생. void 타입에 return을 썼기 때문.
};
// 타입이 지정된 파라미터가 있다면 함수를 부를 때 파라미터도 꼭 같이 입력해줘야 함.
myFunc2(); // Error
myFunc2(x); // 옳은 예시
// 파라미터가 옵션일 땐 '?' 사용
function myFunc3(x? :number) {};
myFunc3(); // 옵션이기에 파라미터 없이도 에러 발생하지 않음.
// cf. '변수명? :number'는 '변수명 :number | undefined'와 같음.Class
// =====Class=====
// class 함수에 type 지정하기
class User {
name :string;
sex :string;
constructor(name :string, sex :string) {
this.name = name;
this.sex = sex;
}
};