찾다

집 >웹 프론트엔드 >JS 튜토리얼 >Typescript를 배우기 위한 여행.

Typescript를 배우기 위한 여행.

Susan Sarandon
Susan Sarandon원래의
2024-11-08 16:13:02911검색

A Journey to Learn Typescript.안녕하세요 여러분, 저는 최근 TypeScript 여행을 시작했고 프로그래밍 히어로의 고급 웹 개발 과정을 통해 진전을 이루고 있습니다. TypeScript에 대한 기본 지식은 있지만 깊이 있게 살펴보지는 않았습니다. 내 과정은 TypeScript에 대한 심층 분석으로 시작되었습니다. 일주일이 지났고, 나는 학습에 상당한 진전을 이루었습니다. 다음은 제가 파악한 주요 개념에 대한 간략한 개요입니다.

TypeScript는 JavaScript와 비슷하지만 강력한 기능을 제공합니다!

TypeScript는 언어에 선택적 정적 타이핑을 추가하는 JavaScript의 상위 집합입니다. 즉, 변수 유형, 함수 매개변수 및 반환 값을 선언할 수 있어 개발 프로세스 초기에 잠재적인 오류를 포착하는 데 도움이 될 수 있습니다.
TypeScript 사용의 이점

  • 오류 조기 감지
  • 코드 가독성 향상
  • 향상된 코드 신뢰성
  • 더 나은 코드 완성 및 IntelliSense
  • 대규모 프로젝트 지원

기본 및 비원시 데이터 유형

기본 데이터 유형은 단일 값을 나타내며 메모리에 직접 저장됩니다. 다음은 TypeScript에 사용되는 기본 데이터 유형 중 일부입니다

  • 문자열
  • 번호
  • 부울
  • 정의되지 않음
  • 널 
let name : string = "Kishor";
let age : number = 27;
let isDeveloper: boolen = true;
let x : null = null;
let y: undefined = undefined;

예제에서 볼 수 있듯이 변수에 유형을 할당하려면 변수 이름과 유형을 정의한 후 콜론( : ) 기호를 사용해야 합니다.

참조 유형이라고도 알려진 비기본 데이터 유형은 복잡한 데이터 구조를 나타내며 메모리 위치에 대한 참조로 저장됩니다. TypeScript는 다음과 같은 비원시 데이터 유형을 지원합니다.

  • 객체
  • 배열
  • 튜플
  • 기능 
let Person: {name: string, age : number} = {name: "kishor", age: 27}; //object
let numbers: number[] = [1,2,3,4];
let fruits: string[]= ["apple", "pineapple", "banana"];
let tuple: [string, number, boolean] = ["xyz", 123, true];
function greet(name: string) : any {
  return `hello ${name}`
}

유형 별칭

TypeScript의 유형 별칭은 기존 유형에 새 이름을 부여하는 방법입니다. 이렇게 하면 특히 복잡한 유형을 처리할 때 코드를 더 읽기 쉽고 유지 관리하기 쉽게 만들 수 있습니다.

// Defining a type alias for a person object
type Person = {
  name: string;
  age: number;
};
// Using the type alias
const person1: Person = {
  name: "Alice",
  age: 30
};

이 예에서 Person은 name 및 age 속성이 있는 객체를 나타내는 유형 별칭입니다.
TypeScript의 결합 및 교차 유형
공용체 유형은 여러 유형 중 하나일 수 있는 값을 나타냅니다. |를 사용하여 정의됩니다. 연산자입니다.
교차 유형은 여러 유형을 단일 유형으로 결합합니다. & 연산자를 사용하여 정의됩니다.

type StringOrNumber = string | number; //Union type
let value: StringOrNumber = "hello";
value = 42;
type Person = {
    name: string;
    age: number;
};
type Address = {
    street: string;
    city: string;
};
type PersonWithAddress = Person & Address;//Intersection type
const personWithAddress: PersonWithAddress = {
    name: "Alice",
    age: 30,
    street: "123 Main St",
    city: "Anytown"
};

결코, 알 수 없음

never 유형은 절대 발생하지 않는 값을 나타냅니다.
알 수 없는 유형은 모든 값을 나타냅니다. 알 수 없는 유형의 값을 사용하기 전에 유형 확인이나 어설션을 수행해야 하기 때문에 any 유형보다 안전합니다.

let name : string = "Kishor";
let age : number = 27;
let isDeveloper: boolen = true;
let x : null = null;
let y: undefined = undefined;

유형 주장

유형 어설션은 유형에 대해 자신이 알고 있는 것보다 더 많이 알고 있음을 TypeScript 컴파일러에 알리는 방법입니다. 변수의 타입을 명시적으로 지정하는 방법입니다

let Person: {name: string, age : number} = {name: "kishor", age: 27}; //object
let numbers: number[] = [1,2,3,4];
let fruits: string[]= ["apple", "pineapple", "banana"];
let tuple: [string, number, boolean] = ["xyz", 123, true];
function greet(name: string) : any {
  return `hello ${name}`
}

유형 가드

유형 가드를 사용하면 특정 조건에 따라 변수 유형의 범위를 좁힐 수 있습니다. 속성이나 메서드에 액세스하기 전에 변수 유형을 확인하면 잠재적인 런타임 오류를 방지할 수 있습니다.

  • 연산자 유형
  • 인스턴스 오브 연산자 
// Defining a type alias for a person object
type Person = {
  name: string;
  age: number;
};
// Using the type alias
const person1: Person = {
  name: "Alice",
  age: 30
};

TypeScript의 인터페이스

TypeScript의 인터페이스는 특정 속성을 가진 객체를 생성하기 위한 청사진입니다.

type StringOrNumber = string | number; //Union type
let value: StringOrNumber = "hello";
value = 42;
type Person = {
    name: string;
    age: number;
};
type Address = {
    street: string;
    city: string;
};
type PersonWithAddress = Person & Address;//Intersection type
const personWithAddress: PersonWithAddress = {
    name: "Alice",
    age: 30,
    street: "123 Main St",
    city: "Anytown"
};

이 예에서 Person 인터페이스는 person 객체에 firstName, lastName 및 age 속성이 있어야 함을 정의합니다. person1 객체 생성 시

TypeScript의 제네릭

제네릭은 다양한 데이터 유형과 작동할 수 있는 재사용 가능한 구성 요소를 만들 수 있는 TypeScript의 강력한 기능입니다.

function error(message: string): never {
    throw new Error(message);
} //the return type is never because there is no data returned.
let value: unknown = "hello";
if (typeof value === "string") {
  let strLength: number = value.length;
}

이 예에서 T는 유형 매개변수입니다. 이는 모든 유형에 대한 자리 표시자를 나타냅니다. 항등 함수를 호출하면 모든 유형의 인수를 전달할 수 있으며 함수는 동일한 유형을 반환합니다.

TypeScript의 제약 조건

TypeScript에서 일반 제약 조건을 사용하면 일반 함수에 인수로 전달되거나 일반 클래스 또는 인터페이스에서 유형 매개변수로 사용될 수 있는 유형에 제한을 적용할 수 있습니다.

let value: unknown = "hello";
let strLength: number = (value as string).length;

여기서 확장 키워드는 데이터를 제한하는 데 사용됩니다

연산자의 키

TypeScript의 keyof 연산자는 객체 유형의 모든 속성 이름에 대한 통합 유형을 가져오는 데 사용됩니다. 이는 일반 유형 및 매핑된 유형으로 작업할 때 특히 유용합니다.

//typeof
function printValue(value: unknown) {
    if (typeof value === "string") {
        console.log(value.toUpperCase());
    } else if (typeof value === "number") {
        console.log(value.toFixed(2));   
    }
}
//instanceof
function printDate(date: unknown) {
    if (date instanceof Date) {
        console.log(date.toISOString());
    }
}

유틸리티 유형

Pick: T에서 특정 속성을 선택합니다

interface Person {
  firstName: string;
  lastName: string;
  age: number;
}
const person1: Person = {
  firstName: "Alice",
  lastName: "Johnson",
  age: 30
};

Omit: T에서 특정 속성을 생략합니다

function identity<T>(arg: T): T {
  return arg;
}
identity<string>(string);

부분: T의 모든 속성을 선택적으로 만듭니다.

interface Person {
    name: string;
    age: number;
}
function identity<T extends Person>(arg: T): T {
  return arg;
}
const result  = identity<Person>({
    name: "aa";
    age: 12;
});

다른 사람들은
필수
읽기 전용
녹음

TypeScript의 클래스

TypeScript에서 클래스는 class 키워드를 사용하여 정의됩니다.

interface Person {
  name: string;
  age: number;
}
type PersonKeys = keyof Person; // Type: "name" | "age"

TypeScript의 액세스 한정자

공개 클래스 구성원의 기본 공개 상태는 공개입니다. 공개 회원은 어디에서나 접근 가능
보호된 멤버는 자신이 선언된 클래스의 하위 클래스에만 표시됩니다.
private 멤버는 클래스 내에서만 접근 가능합니다.

TypeScript의 정적 멤버

TypeScript의 정적 멤버는 클래스의 개별 인스턴스가 아닌 클래스 자체에 속하는 멤버(속성 및 메서드)입니다.

let name : string = "Kishor";
let age : number = 27;
let isDeveloper: boolen = true;
let x : null = null;
let y: undefined = undefined;

TypeScript로 구현

TypeScript에서 인터페이스는 클래스가 구현할 계약을 정의합니다. 인터페이스를 구현하는 클래스에는 인터페이스에 선언된 모든 속성과 메서드가 있어야 합니다. Implements 키워드가 사용됩니다

let Person: {name: string, age : number} = {name: "kishor", age: 27}; //object
let numbers: number[] = [1,2,3,4];
let fruits: string[]= ["apple", "pineapple", "banana"];
let tuple: [string, number, boolean] = ["xyz", 123, true];
function greet(name: string) : any {
  return `hello ${name}`
}

결론:

이번 주에 배운 Typescript의 기본 사용 사례 중 일부입니다. 나는 많은 멋진 것들을 배웠지만 아직 발견할 것이 훨씬 더 많습니다. TypeScript는 끊임없이 발전하고 있으므로 최신 릴리스와 기능을 따라잡기 위해 노력하고 있으며 TypeScript의 공식 문서와 블로그에서 최신 뉴스와 모범 사례를 확인하고 있습니다. 
내 여행에 함께 해주셔서 감사합니다.

위 내용은 Typescript를 배우기 위한 여행.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript typescript Static String Boolean Array Object NULL define for catch Error union using class public private protected operator Interface Property Generic number undefined symbol function default this Access
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：JavaScript로 CSS 의사 요소 스타일을 수정할 수 있나요?다음 기사：JavaScript로 CSS 의사 요소 스타일을 수정할 수 있나요?

관련 기사

더보기