Typescript (8) 썸네일형 리스트형 Typescript - 고급 기능 타입스크립트를 사용할 때 편리한 기능을 소개합니다. Optional Chaining interface MyInfo { name: string, friends?:{ friend1: boolean, friend2: boolean } } const myInfo = { name:"개발자" } /* age의 값이 undefinded 이거나 null인경우를 체크하여 age를 출력해보자 */ // 옵셔널체이닝 미사용 - &&(논리연산자)를 이용 // myInfo.friends 값이 null, undefined, ‘’, 0, -0, NaN 이 아니라면 true 이고 아니면 false function funTest1 (myInfo) { if(myInfo.friends && myInfo.friends.friend1){ /.. 기본 타입 외 여러 종류의 타입 Enum 타입 열거형으로 Enum를 사용하면 이름이 붙은 상수 셋을 정의합니다. enum타입을 사용하게 특수한 변수를 사용하게 되는경우 가독성이 좋아집니다. enum MyInfo { Name = '개발자', Age = 32 } console.log(MyInfo.Name) // result => '개발자' console.log(MyInfo.Age) // result => 32 Generic 타입 제네릭은 클래스와 함수에서 사용하는 타입을 추상화해 외부로부터 구체적인 타입을 지정합니다. 외부에서 지정된 타입이 달라도 작동하도록 범용적인 클래스나 함수를 정의할 때 편리합니다. // T는 클래스안에서 임시 타입이다. class Queue { private arr: T[] = [] push(item:T){ thi.. 타입 Alias, Interface, Class 타입을 지정할 때 인라인으로 표기하는 방법외에도 Type, Interface, Class 을 이용하여 타입을 지정할 수 있다. 이 방법을 사용하면 재사용성이 높아지게 된다. Type Alias type Info = { name: string, age: number } function printMe(param: Info){ console.log(`${param.name} 의 나이는 ${param.age} 입니다.`) } printMe('개발자',32) // result => '개발자 나이는 32 입니다.' /* 함수 자체의 타입도 정의 가능 */ type FunTest = (name:string) => string function test(name: string, funParam: FunTest){ con.. 타입 Assertion (명시적으로 타입을 정의) 타입스크립트가 구체적인 타입을 알 수 없는 경우가 있습니다. 이런 경우 Any를 사용해도 되지만 타입이 정해진 인수에 해당 값을 사용하려면 타입의 강제 정의가 필요합니다. 코드에서 자바스크립트의 내장 함수를 사용하여 값을 도출한경우를 예를 들어 설명드리겠습니다. function funTest(param:string){ return param } funTest(param) // param의 값이 string이 아니라면 type error 발생 funTest(param as string) // param의 값을 string으로 명시한다. Typescript - 함수 타입스크립트의 함수에서는 인수와 반환값의 타입을 정의 할 수 있습니다. // name 이라는 string 타입과 age라는 number Optional 타입을 파라미터로 받으며 // string 타입으로 반환하는 함수 function funTest(name: string, age?: number) : string { return 'Hello' + name } // function을 인수로 받아 사용할 수도 있습니다. funtion funTest2(name:string, format: (name:string) => string){ return format(name) } funTest2('개발자',funTest) // result => 'Hello 개발자' Typescript - 변수 타입스크립트의 변수 선언은 자바스크립트와 동일합니다. 변수 선언할 때 종류는 var, let, const 를 사용합니다. 차이는 변수를 선언하고 바로 뒤에 타입을 적어주는 것 입니다. // var temp1: 타입 = '값' // let temp2: 타입 = '값' // const temp3: 타입 = '값' let, const의 경우 블록 스코프 안에서만 사용할 수 있는 반면 var의 경우는 블록 스코프 밖에서도 사용할 수 있습니다. 또한 const 의 경우 상수를 선언할 때 주로 사용하므로 값을 변경하면 error가 발생합니다. function funTest(){ let temp1: string = 'letTest1' if(temp1 typeof 'string'){ let temp2: string =.. Typescript - 타입 정의 타입스크립트의 가장 큰 기능인 타입 정의에 대해서 공부해보도록 하겠습니다. 타입스크립트는 자바스크립트의 문법을 기본으로 작성하며 타입, 클래스 등 일부 코드의 작성법에 차이가 좀 있습니다. /* 파라미터로 받는 name 뒤에 string 타입을 붙여서 string값만 받을 수 있음을 명시합니다 */ function funTest (name : string){ console.log(name) } let name:string = '개발자' funTest(name) 만약 name 값에 string 타입이 아닌 다른 타입을 주입하면 타입스크립트 에러가 발생하게 됩니다. let num: number = 32 funTest(num) // error 또한, 변수를 호출해둔 값을 함수로 호출하는 경우 컴파일 에러가 발.. Javascript 와 Typescript 차이 타입스크립트는 자바스크립트를 확장한 상위 호환 언어입니다. 즉, 타입스크립트는 자바스크립트와 전혀 다른 언어가 아닌 자바스크립트를 기반으로한 언어입니다. /* Javascript 예시 */ function javascriptTest (name) { console.log('Hello' + name) } const name = '개발자' javascriptTest(name) /* Typescript 예시 */ function typescriptTest (name:string) { console.log('Hello' + name) } const name:string = '개발자' typescriptTest(name) 위 예시를 보면 두개의 코드는 큰 차이가 없고 변수를 선언할 때 Type을 지정하여 사용한다는.. 이전 1 다음
