타입스크립트 소개-JS 튜토리얼-php.cn

타입스크립트 소개

王林

풀어 주다： 2024-07-24 14:49:19

원래의

449명이 탐색했습니다.

Introduction to TypeScript

TypeScript는 일반 JavaScript로 컴파일되는 JavaScript의 형식화된 상위 집합입니다. 코드에 정적 유형을 추가하여 개발 중에 오류를 더 쉽게 포착할 수 있습니다.

TypeScript 설정
먼저 TypeScript를 설정해 보겠습니다.

npm을 사용하여 전역적으로 TypeScript를 설치합니다.

npm install -g typescript

로그인 후 복사

TypeScript 프로젝트 초기화:

tsc --init

로그인 후 복사

TypeScript 컴파일:

TypeScript 파일 (.ts)을 컴파일하려면 다음을 실행하세요.

tsc filename.ts

로그인 후 복사

기본 유형

몇 가지 기본 유형과 재미있는 예부터 시작해 보겠습니다.

1. 기본 유형

문자열

let greeting: string = "Hello, TypeScript!";
console.log(greeting); // Hello, TypeScript!

로그인 후 복사

번호

let age: number = 42;
console.log(`I'm ${age} years old!`); // I'm 42 years old!

로그인 후 복사

부울

let isHappy: boolean = true;
console.log(`Am I happy? ${isHappy}`); // Am I happy? true

로그인 후 복사

특정 유형만 이해할 수 있는 로봇을 상상해 보세요.

let robotName: string = "RoboCop";
let robotAge: number = 100;
let isRobotFriendly: boolean = true;

console.log(`Meet ${robotName}, who is ${robotAge} years old. Friendly? ${isRobotFriendly}`); 
// Meet RoboCop, who is 100 years old. Friendly? true

로그인 후 복사

2. 배열

TypeScript 배열은 한 가지 유형의 데이터만 보유할 수 있습니다.

let fruits: string[] = ["Apple", "Banana", "Cherry"];
console.log(fruits); // ["Apple", "Banana", "Cherry"]

로그인 후 복사

장난감 컬렉션을 정리하는 고양이(공만):

let catToys: string[] = ["Ball1", "Ball2", "Ball3"];
console.log(catToys); // ["Ball1", "Ball2", "Ball3"]

로그인 후 복사

3. 튜플

튜플을 사용하면 유형이 알려진 고정된 수의 요소로 배열을 표현할 수 있습니다.

let myTuple: [string, number];
myTuple = ["Hello", 42]; // OK
console.log(myTuple); // ["Hello", 42]

로그인 후 복사

코드명과 ID 번호를 가진 극비 요원을 상상해 보세요.

let agent: [string, number] = ["Bond", 007];
console.log(agent); // ["Bond", 007]

로그인 후 복사

기능

TypeScript를 사용하면 매개변수 유형과 함수 반환 값을 지정할 수 있습니다.

function add(a: number, b: number): number {
    return a + b;
}

console.log(add(5, 3)); // 8

로그인 후 복사

마법수저를 든 셰프:

function mixIngredients(ingredient1: string, ingredient2: string): string {
    return `${ingredient1} mixed with ${ingredient2}`;
}

console.log(mixIngredients("Flour", "Sugar")); // Flour mixed with Sugar

로그인 후 복사

인터페이스

인터페이스는 객체의 구조를 정의합니다.

interface Person {
    name: string;
    age: number;
}

let user: Person = {
    name: "Alice",
    age: 30
};

console.log(user); // { name: "Alice", age: 30 }

로그인 후 복사

특별한 신분증을 가지고 말하는 개:

interface Dog {
    name: string;
    breed: string;
}

let talkingDog: Dog = {
    name: "Scooby-Doo",
    breed: "Great Dane"
};

console.log(talkingDog); // { name: "Scooby-Doo", breed: "Great Dane" }

로그인 후 복사

수업

TypeScript 클래스는 초기 값과 메서드를 사용하여 객체를 생성하기 위한 청사진입니다.

class Animal {
    name: string;

    constructor(name: string) {
        this.name = name;
    }

    move(distance: number = 0) {
        console.log(`${this.name} moved ${distance} meters.`);
    }
}

let dog = new Animal("Dog");
dog.move(10); // Dog moved 10 meters.

로그인 후 복사

슈퍼히어로 수업:

class Superhero {
    name: string;

    constructor(name: string) {
        this.name = name;
    }

    saveTheCat() {
        console.log(`${this.name} saved the cat!`);
    }
}

let hero = new Superhero("Batman");
hero.saveTheCat(); // Batman saved the cat!

로그인 후 복사

열거형

Enum을 사용하면 명명된 상수 집합을 정의할 수 있습니다.

enum Direction {
    Up,
    Down,
    Left,
    Right
}

let move: Direction = Direction.Up;
console.log(move); // 0

로그인 후 복사

신호등 시스템:

enum TrafficLight {
    Red,
    Yellow,
    Green
}

let light: TrafficLight = TrafficLight.Green;
console.log(light); // 2

로그인 후 복사

결론

_기본 유형부터 제네릭 및 열거형과 같은 고급 기능에 이르기까지 TypeScript에 대해 회오리바람처럼 둘러보았습니다. 이러한 예를 통해 프로젝트에서 TypeScript를 더 자세히 탐색하고 사용할 수 있는 좋은 출발점이 될 것입니다.

TypeScript에 대해 구체적인 질문이 있거나 더 재미있는 예제가 필요하면 언제든지 문의하세요!_

위 내용은 타입스크립트 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!