TypeScript
TypeScript 코어 유형

통사론

• let variableName : VariableType;
• function functionName (parameterName : VariableType, parameterWithDefault : VariableType = ParameterDefault, optionalParameter : VariableType, ... variardicParameter : VariableType []) : ReturnType {/*...*/};

부울

부울은 True / False 값을 할당 할 목적으로 TypeScript에서 가장 기본적인 데이터 유형을 나타냅니다.

// set with initial value (either true or false)
let isTrue: boolean = true;        

// defaults to 'undefined', when not explicitely set
let unsetBool: boolean;             

// can also be set to 'null' as well
let nullableBool: boolean = null;

번호

JavaScript와 마찬가지로 숫자는 부동 소수점 값입니다.

let pi: number = 3.14;           // base 10 decimal by default
let hexadecimal: number = 0xFF;  // 255 in decimal

ECMAScript 2015는 2 진수와 8 진수를 허용합니다.

let binary: number = 0b10;   // 2 in decimal
let octal: number = 0o755;   // 493 in decimal

끈

텍스트 데이터 유형 :

let singleQuotes: string = 'single';
let doubleQuotes: string = "double";
let templateString: string = `I am ${ singleQuotes }`; // I am single

정렬

값 배열 :

let threePigs: number[] = [1, 2, 3];
let genericStringArray: Array<string> = ['first', '2nd', '3rd'];

열거 형

숫자 값의 집합 이름 지정 유형 :

숫자 값의 기본값은 0입니다.

enum Day { Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday };
let bestDay: Day = Day.Saturday;

기본 시작 번호 설정 :

enum TenPlus { Ten = 10, Eleven, Twelve }

또는 값을 할당하십시오.

enum MyOddSet { Three = 3, Five = 5, Seven = 7, Nine = 9 } 

어떤

유형이 확실하지 않은 any 사용할 수있는 유형은 다음과 같습니다.

let anything: any = 'I am a string';
anything = 5; // but now I am the number 5

빈

아무런 타입이 없다면, 아무것도 반환하지 않는 함수에 일반적으로 사용됩니다 :

function log(): void {
    console.log('I return nothing');
}

void 형 null 또는 undefined 만 할당 할 수 있습니다.

튜플

알려진 유형 및 가능한 유형이 다른 어레이 유형 :

let day: [number, string];
day = [0, 'Monday'];      // valid
day = ['zero', 'Monday']; // invalid: 'zero' is not numeric
console.log(day[0]); // 0
console.log(day[1]); // Monday

day[2] = 'Saturday'; // valid: [0, 'Saturday']
day[3] = false;      // invalid: must be union type of 'number | string'

함수 인자와 반환 값을 입력합니다. 번호

TypeScript에서 함수를 만들 때 함수 인수의 데이터 형식과 반환 값의 데이터 형식을 지정할 수 있습니다

예:

function sum(x: number, y: number): number {
    return x + y;
}

여기서 x: number, y: number 구문은 함수가 두 개의 인수 x 및 y 허용 할 x: number, y: number 있음을 의미하며 숫자와 (...): number { 만 가능합니다 (...): number { 반환 값이 숫자 일 수 있음을 나타냅니다.

용법:

sum(84 + 76) // will be return 160

노트 :

너 그렇게 할 수 없어.

function sum(x: string, y: string): number {
    return x + y;
}

또는

function sum(x: number, y: number): string {
    return x + y;
}

다음과 같은 오류가 발생합니다.

error TS2322: Type 'string' is not assignable to type 'number' error TS2322: Type 'number' is not assignable to type 'string' 각각 error TS2322: Type 'number' is not assignable to type 'string'

함수 인자와 반환 값을 입력합니다. 끈

예:

function hello(name: string): string {
    return `Hello ${name}!`;
}

여기서 구문 name: string 은 함수가 하나의 name 인수를 허용 할 수 있음을 의미하며이 인수는 string 및 (...): string { 만 가능합니다 (...): string { 반환 값이 문자열 일 수 있음을 나타냅니다.

용법:

hello('StackOverflow Documentation') // will be return Hello StackOverflow Documentation!

문자열 리터럴 유형

문자열 리터럴 유형을 사용하면 문자열에 지정할 수있는 정확한 값을 지정할 수 있습니다.

let myFavoritePet: "dog";
myFavoritePet = "dog";

다른 문자열은 오류를 발생시킵니다.

// Error: Type '"rock"' is not assignable to type '"dog"'.
// myFavoritePet = "rock";

타입 앨리어스 (Type Aliases)와 연합 타입 (Union Type)과 함께 열거 형 (enum-like) 동작을 얻습니다.

type Species = "cat" | "dog" | "bird";

function buyPet(pet: Species, name: string) : Pet { /*...*/ }

buyPet(myFavoritePet /* "dog" as defined above */, "Rocky");

// Error: Argument of type '"rock"' is not assignable to parameter of type "'cat' | "dog" | "bird". Type '"rock"' is not assignable to type '"bird"'.
// buyPet("rock", "Rocky");

문자열 리터럴 유형을 사용하여 오버로드를 구별 할 수 있습니다.

function buyPet(pet: Species, name: string) : Pet;
function buyPet(pet: "cat", name: string): Cat;
function buyPet(pet: "dog", name: string): Dog;
function buyPet(pet: "bird", name: string): Bird;
function buyPet(pet: Species, name: string) : Pet { /*...*/ }

let dog = buyPet(myFavoritePet /* "dog" as defined above */, "Rocky");
// dog is from type Dog (dog: Dog)

그들은 User-Defined Type Guards에서 잘 작동합니다.

interface Pet {
    species: Species;
    eat();
    sleep();
}

interface Cat extends Pet {
    species: "cat";
}

interface Bird extends Pet {
    species: "bird";
    sing();
}

function petIsCat(pet: Pet): pet is Cat {
    return pet.species === "cat";
}

function petIsBird(pet: Pet): pet is Bird {
    return pet.species === "bird";
}

function playWithPet(pet: Pet){
    if(petIsCat(pet)) {
        // pet is now from type Cat (pet: Cat)
        pet.eat();
        pet.sleep();
    } else if(petIsBird(pet)) {
        // pet is now from type Bird (pet: Bird)
        pet.eat();
        pet.sing();
        pet.sleep();
    }
}

전체 예제 코드

let myFavoritePet: "dog";
myFavoritePet = "dog";

// Error: Type '"rock"' is not assignable to type '"dog"'.
// myFavoritePet = "rock";

type Species = "cat" | "dog" | "bird";

interface Pet {
    species: Species;
    name: string;
    eat();
    walk();
    sleep();
}

interface Cat extends Pet {
    species: "cat";
}

interface Dog extends Pet {
    species: "dog";
}

interface Bird extends Pet {
    species: "bird";
    sing();
}

// Error: Interface 'Rock' incorrectly extends interface 'Pet'. Types of property 'species' are incompatible. Type '"rock"' is not assignable to type '"cat" | "dog" | "bird"'. Type '"rock"' is not assignable to type '"bird"'.
// interface Rock extends Pet { 
//      type: "rock"; 
// }

function buyPet(pet: Species, name: string) : Pet;
function buyPet(pet: "cat", name: string): Cat;
function buyPet(pet: "dog", name: string): Dog;
function buyPet(pet: "bird", name: string): Bird;
function buyPet(pet: Species, name: string) : Pet {
    if(pet === "cat") { 
        return {
            species: "cat",
            name: name,
            eat: function () {
                console.log(`${this.name} eats.`);
            }, walk: function () {
                console.log(`${this.name} walks.`);
            }, sleep: function () {
                console.log(`${this.name} sleeps.`);
            }
        } as Cat;
    } else if(pet === "dog") { 
        return {
            species: "dog",
            name: name,
            eat: function () {
                console.log(`${this.name} eats.`);
            }, walk: function () {
                console.log(`${this.name} walks.`);
            }, sleep: function () {
                console.log(`${this.name} sleeps.`);
            }
        } as Dog;
    } else if(pet === "bird") { 
        return {
            species: "bird",
            name: name,
            eat: function () {
                console.log(`${this.name} eats.`);
            }, walk: function () {
                console.log(`${this.name} walks.`);
            }, sleep: function () {
                console.log(`${this.name} sleeps.`);
            }, sing: function () {
                console.log(`${this.name} sings.`);
            }
        } as Bird;
    } else {
        throw `Sorry we don't have a ${pet}. Would you like to buy a dog?`;
    }
}

function petIsCat(pet: Pet): pet is Cat {
    return pet.species === "cat";
}

function petIsDog(pet: Pet): pet is Dog {
    return pet.species === "dog";
}

function petIsBird(pet: Pet): pet is Bird {
    return pet.species === "bird";
}

function playWithPet(pet: Pet) {
    console.log(`Hey ${pet.name}, let's play.`);
    
    if(petIsCat(pet)) {
        // pet is now from type Cat (pet: Cat)
        
        pet.eat();
        pet.sleep();
        
        // Error: Type '"bird"' is not assignable to type '"cat"'.
        // pet.type = "bird";
        
        // Error: Property 'sing' does not exist on type 'Cat'.
        // pet.sing();
        
    } else if(petIsDog(pet)) {
        // pet is now from type Dog (pet: Dog)
        
        pet.eat();
        pet.walk();
        pet.sleep();
        
    } else if(petIsBird(pet)) {
        // pet is now from type Bird (pet: Bird)
    
        pet.eat();
        pet.sing();
        pet.sleep();
    } else {
        throw "An unknown pet. Did you buy a rock?";
    }
}

let dog = buyPet(myFavoritePet /* "dog" as defined above */, "Rocky");
// dog is from type Dog (dog: Dog)

// Error: Argument of type '"rock"' is not assignable to parameter of type "'cat' | "dog" | "bird". Type '"rock"' is not assignable to type '"bird"'.
// buyPet("rock", "Rocky");

playWithPet(dog);
// Output: Hey Rocky, let's play.
//         Rocky eats.
//         Rocky walks.
//         Rocky sleeps.

교차점 유형

교차 유형은 둘 이상의 유형의 구성원을 결합합니다.

interface Knife {
    cut();
}

interface BottleOpener{
    openBottle();
}

interface Screwdriver{
    turnScrew();
}

type SwissArmyKnife = Knife & BottleOpener & Screwdriver;

function use(tool: SwissArmyKnife){
    console.log("I can do anything!");
    
    tool.cut();
    tool.openBottle();
    tool.turnScrew();
}

const 열거 형

const 열거 형은 일반적인 열거 형과 같습니다. 컴파일시에 Object가 생성되지 않는 것을 제외하고는. 대신에, 리터럴 값은 const Enum이 사용되는 곳에 대체됩니다.

// Typescript: A const Enum can be defined like a normal Enum (with start value, specifig values, etc.)
const enum NinjaActivity {
    Espionage, 
    Sabotage, 
    Assassination
}

// Javascript: But nothing is generated    

// Typescript: Except if you use it
let myFavoriteNinjaActivity = NinjaActivity.Espionage;
console.log(myFavoritePirateActivity); // 0

// Javascript: Then only the number of the value is compiled into the code
// var myFavoriteNinjaActivity = 0 /* Espionage */;
// console.log(myFavoritePirateActivity); // 0

// Typescript: The same for the other constant example
console.log(NinjaActivity["Sabotage"]); // 1   

// Javascript: Just the number and in a comment the name of the value
// console.log(1 /* "Sabotage" */); // 1

// Typescript: But without the object none runtime access is possible
// Error: A const enum member can only be accessed using a string literal.
// console.log(NinjaActivity[myFavoriteNinjaActivity]);

비교를 위해 일반적인 Enum

// Typescript: A normal Enum
enum PirateActivity {
    Boarding,
    Drinking, 
    Fencing 
} 

// Javascript: The Enum after the compiling
// var PirateActivity;
// (function (PirateActivity) {
//     PirateActivity[PirateActivity["Boarding"] = 0] = "Boarding";
//     PirateActivity[PirateActivity["Drinking"] = 1] = "Drinking";
//     PirateActivity[PirateActivity["Fencing"] = 2] = "Fencing";
// })(PirateActivity || (PirateActivity = {}));

// Typescript: A normale use of this Enum
let myFavoritePirateActivity = PirateActivity.Boarding;
console.log(myFavoritePirateActivity); // 0

// Javascript: Looks quite similar in Javascript
// var myFavoritePirateActivity = PirateActivity.Boarding;
// console.log(myFavoritePirateActivity); // 0

// Typescript: And some other normale use
console.log(PirateActivity["Drinking"]); // 1

// Javascript: Looks quite similar in Javascript
// console.log(PirateActivity["Drinking"]); // 1

// Typescript: At runtime, you can access an normal enum
console.log(PirateActivity[myFavoritePirateActivity]); // "Boarding"

// Javascript: And it will be resolved at runtime
// console.log(PirateActivity[myFavoritePirateActivity]); // "Boarding"