TypeScript
📖 TypeScript란?
타입스크립트는 자바스크립트의 상위 집합으로서 ECMA의 최신 표준을 충분히 지원합니다. 타입스크립트의 장점은 정적 타입 언어(static type language) 이기 때문에 컴파일 시 시간이 조금 걸리더라고 안정성을 보장한다는 장정이 있습니다. 자바스크립트는 동적 타입 언어 (dynamic type language) 이기 때문에 런타임 속도는 빠르지만 타입 안정성이 보장되지 않습니다.
우리가 사용하는 브라우저들은 타입스크립트를 이해하지 못합니다. 자바스크립트로 변환해서 로드해야 진행이 가능합니다.
이렇게만 보면 번거로워 보이는 타입스크립트는 어떠한 장점이 있기에 사용하는건지 알아보겠습니다.
📖 기본 타입
타입스크립트의 기본 타입을 알아보겠습니다
let car:string = "bmw";
let age:number = 30;
let isAdult:bollean = true;
let a:number[] = [1,2,3]
let a2:Array<number> = [1,2,3]
let week1:string[] = ["mom", "tue", "wed"]
let week2:Array<string> = ["mom", "tue", "wed"]
week1.push(3) // week 문자열 베열에 숫자를 넣으려하면 에러가 발생합니다.
다음은 튜플 (Tuple)을 알아보겠습니다. 튜플은 인덱스별로 타입이 다를때 이용할수 있습니다
let b:[string, number];
b = ["z",1];
b = [1, "z"] // 에러가 발생합니다
b[0].toLowerCase()
b[1].toLowerCase() // 에러가 발생합니다
다음은 void와 never 입니다. void는 전혀 어떤값을 가지지 않는 것을 의미합니다. 아마도 어떤값도 return하지 않는 함수의 reutrn type으로 종종 보았을 것입니다. never는 절대 발생하지 않는 값의 타입을 표현하는데 사용하며 보통 에러를 발생하거나, 절대 return하지 않는(무한 루프) 함수의 return type으로 많이 사용합니다.
function sayHello():void{
console.log("hello")
}
function showError():never{
throw new Error()
}
function infLoop():never{
while(true){
}
}
다음은 null, undefined 입니다.
let a:null = null;
let b:undefined = undefined;
📖 interface란?
인터페이스는 일반적으로 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용할 수 있습니다. 인터페이스는 여러가지 타입을 갖는 프로퍼티로 이루어진 새로운 타입을 정의하는 것과 유사합니다. 인터페이스에 선언된 프로퍼티 또는 메소드의 구현을 강제하여 일관성을 유지할 수 있도록 하는 것입니다. ES6는 인터페이스를 지원하지 않지만 TypeScript는 인터페이스를 지원합니다.
인터페이스는 프로퍼티와 메소드를 가질 수 있다는 점에서 클래스와 유사하나 직접 인스턴스를 생성할 수 없고 모든 메소드는 추상 메소드입니다. 단, 추상 클래스의 추상 메소드와 달리 abstract 키워드를 사용하지 않습니다.
// 1번 예제
let user:object;
user = {
name : "xx",
age: 30
}
console.log(user.name) // object에는 name이 없다라는 에러가 발생합니다. 이렇게 프로퍼티를 통해 객체를 표현하고자 할때는 interface를 사용합니다.
// 2번 예제
interface User {
name : string,
age : number;
}
let user : User = {
name : "xx",
age : 30
}
console.log(user.age) // 에러가 발생하지 않습니다.
// 3번 예제
interface User {
name : string,
age : number;
gender? : string
}
let user : User = {
name : "xx",
age : 30
}
user.age = 10;
user.gender = "male" // 에러가 발생합니다. 이를 해결하려면 gender에 ? 를 붙혀줍니다. 이것은 gender가 있어도 되고 없어도 된다는 옵셔널한 프로퍼티입니다.
console.log(user.age)
// 4번 예제 readonly
interface User {
name : string,
age : number;
gender? : string;
readonly birthYear : number;
}
let user : User = {
name : "xx",
age : 30,
birthYear : 2000,
}
user.age = 10;
user.gender = "male"
user.birthYear = 1990; // birthyaer에 readonly를 넣어주면 user.birthYear = 1990에는 에러가 발생합니다. readonly 이기 대문에 최고의 2000말고는 수정할수 없습니다.
console.log(user.age)
// 5번 예제
interface Add { (num1:number, num2:number): number}
const add : Add = function(x,y){
return x + y
}
add(10,20) // 30
////////////////
interface IsAdult { (age:number): boolean; }
const a:IsAdult = (age) => {
return age > 19;
}
a(33) // true
// 6번 예제 implements
interface Car {
color: string;
wheels = 4;
start(): void;
}
class Bmw implements Car {
color ;
wheels = 4;
constructor(c:string){
this.color = c;
}
}
const b = new Bmw("green");
console.log(b) // Bmw: {"wheels": 4, "color": "green"}
b.start() // "go.."
///// interface는 확장이 가능합니다
interface Benz extends Car {
door: number;
stop():void;
}
const benz : Benz = {
door : 5,
stop() {
console.log("stop")
}
color : "black",
wheels: 4,
start(){}
}
}
📖 함수
함수의 타입은 void, number, string 등 여러가지의 타입을 지정할 수 있습니다. 함수의 return 값이 없는 경우에는 void로 지정할 수 있고 함수의 return 값이 있는 경우에는 각 Type들로 지정할 수 있습니다.
// 함수 예제1
//아래 예제는 hello 함수의 파라미터가 있어도 되고 없어도 되는 선택적 매개변수라고 부릅니다. 인자로 name옆에 ? 이 없다면 이 코드는 오류가 생깁니다. 타입스크립트는 보다 명시적으로 알려줘야합니다.
function hello(name?:string){
return `Hello, ${name || "world"}`
}
// 자바스크립트는 매개변수(파라미터)에 디폴드 값을 줄수있습니다.
function hello(name="world"){
return `Hello, ${name}`
}
const result = hello()
const result2 = hello("sam")
const result3 = hello(123) // 에러가 발생합니다.
//예제2
// 나머지 매개변수를 이용해보겠습니다.
// 나머지 매개변수를 이용하면 전달받은 매개변수를 배열로 나타낼수 있게합니다.
function add(...nums){
return nums.reduce((result,num) => result + num, 0)
}
add(1,2,3) //6
add(1,2,3,4,5,6,7,8,9,10) // 55
// 예제 3
interface User {
name: string;
}
const Sam: User = {name:'Sam'}
function showName(this:User, age:number, gender: "m" | "f" ){
console.log(this.name, age,gender)
}
const a = showName.bind(Sam);
a(30,"m")
댓글남기기