ts는 js의 한계점을 극복하기 위해 만들어졌다.
let add = (x,y)=>{
return x+y;
}
add(5,"7"); // "57"
Javascript는 위와 같은 코드에서 number타입의 변수를 강제적으로 문자열로 변환시켜서 원하지 않는 결과를 초래한다.
이런 문제점을 보완한 게 TypeScript다.
let add = (x:number,y:number):number=>{
return x+y;
}
add(5,7); // 12
let imtrue:boolean = true;
let imfalse:boolean = false;
let number1:number = 5;
let number2:number = 0.1;
let firstName: string = "coding";
let lastName: string = 'kim';
let longString: string = `Kimcoding is a developer.
//첫 번째 방법
let items: string[] = ["apple", "banana", "grape"];
//두 번째 방법
let numberList: Array<number> = [4, 7, 100];
let user: [string, number, boolean] = ["kimcoding", 20, true];
요소의 타입과 갯수가 고정된 배열을 표현한다.
let user: {name: string, age: number} = {
name: "kimcoding",
age: 20
}
any 타입을 사용하게 되면 변수의 타입에 구애받지 않고 값을 재할당 가능하다.
let maybe: any = 4;
maybe = true;// 값 재할당이 정상적으로 이루어진다.
다음과 같은 함수를 Ts로 변환해보겠다.
// Javascript
function add(x, y){
return x + y;
}
let add = (x, y) => {
return x + y;
}
// TypeScript
function add(x: number, y: number):number {
return x + y;
}
let add = (x: number, y: number): number => {
return x + y;
}
함수의 리턴 값에도 Type을 명시해줘야 하며, 함수에 리턴값이 없는 함수는 void
를 이용한다.
let consolePrint = ():void=>{
console.log("hello");
}
또한 타입스크립트는 매개변수의 갯수에 맞춰서 인자를 전달해야한다.
let greeting = (firstName: string, lastName: string): string => {
return `hello, ${firstName} ${lastName}`;
}
//error
greeting('coding');
//Good
greeting('coding', 'kim');
//error
greeting('coding', 'kim', 'hacker');
위 코드에서 선택적으로 매개변수를 보낼 경우(2갠데 1개만 보낼때) 매개변수의 이름 끝에 ?
를 붙인다.
let greeting = (firstName: string, lastName?: string): string => {
return `hello, ${firstName} ${lastName}`;
}
//Good
greeting('coding');
//Good
greeting('coding', 'kim');
//error
greeting('coding', 'kim', 'hacker');
유니온 타입은 둘 이상의 타입을 합쳐서 만든 새로운 타입이다.
function printValue(value: number|string): void {
if (typeof value === "number") {
console.log(`The value is a number: ${value}`);
} else {
console.log(`The value is a string: ${value}`);
}
}
printValue(10); // The value is a number: 10
printValue("hello"); // The value is a string: hello
value에 number또는 string형태의 인자가 들어갈 수 있다.
다만, 아래와 같은 경우는 주의를 해야한다.
interface Developer {
name: string;
skill: string;
}
interface Person {
name: string;
age: number;
}
function askSomeone(someone: Developer | Person) {
// in 연산자 : 타입스크립트에서 객체의 속성이 존재하는지를 체크하는 연산자
// in 연산자는 객체의 속성 이름과 함께 사용하여 해당 속성이 객체 내에 존재하는지 여부를 검사
if ('skill' in someone) {
console.log(someone.skill);
}
if ('age' in someone) {
console.log(someone.age);
}
}
name은 공통이지만, skill과 age는 공통이 아니라 사용할 수 없다.
위와 같은 경우는 in 연산자를 사용한다.
인터섹션 타입은 유니온 타입과 마찬가지로 둘 이상의 타입을 결합한다.
다만 in 연산자를 사용하지 않아도 된다.(타입 가드가 필요 없음)
interface Developer {
name: string;
skill: string;
}
interface Person {
name: string;
age: number;
}
function askSomeone(someone: Developer & Person) {
console.log(someone.age);
console.log(someone.name);
console.log(someone.skill);
}
대신 모든 프로퍼티를 전부 보내줘야한다.