Typescript 101 - 타자, 인터페이스, 매거진, 세상에!

Typescript 비디오 재생 목록을 보려면 여기를 클릭하십시오.

타자 스크립트는 무엇입니까?
자바스크립트는 인터넷의 언어로 단기간 내에 바뀌지 않을 것이다. 프로젝트와 팀 규모가 커지면서 자바스크립트의 높은 유연성 때문에 오류를 방지하거나 포착하기 어렵다.
다른 언어에서 타자는 몇 가지 장점이 있다.

변수와 매개 변수가 수신해야 하는 값이나 함수가 되돌아와야 하는 값을 정의하여 코드가 실행되기 전에 컴파일 오류를 발견할 수 있도록 합니다.

입력을 하면 팀의 다른 개발자들이 코드에 무엇을 넣어야 하는지 알 수 있도록 코드를 더 많이 기록할 수 있습니다.

를 입력하면 IDE 모니터링 코드의 오류를 허용하고 함수가 오용되었을 때 가능한 한 빨리 경고를 보냅니다.

Typescript는 마이크로소프트에서 만든 언어로 자바스크립트에서 쉽게 전환할 수 있습니다.실제로는 입력한javascript만 있기 때문이다.Typescript는 컴파일링 절차가 필요하며 Microsofts Visual Studio 코드에 대량으로 통합됩니다.이것은 실행 중 중단되는 코드를 방지할 수 있는 두 개의 방어선을 제공합니다. (최종 사용자가 코드를 만났을 때)

VS 코드는 입력한 내용에 따라 오류를 포착할 수 있음

모든 유형 검사가 성공적으로 통과되지 않은 경우

TS 컴파일러(TSC)는 컴파일되지 않습니다.
최종 결과는 브라우저가 호환하는 자바스크립트입니다. 그러나 가장 멋진 자바스크립트 기능과 Typescript에서 작동하는 버그를 방지하는 모든 기능을 얻을 수 있습니다.

시작해보도록 하겠습니다.
본 강좌에 대해 저는 다음과 같은 코드 샌드박스를 사용할 것입니다. https://codesandbox.io/s/typescript-starter-u7of1
로컬 typescript 설정을 처음부터 만들려면 다음 명령을 실행할 수 있습니다.

스크립트만 입력: npx merced-spinup ts projectName

타자 스크립트/반응: npx merced-spinup reactts projectname

그 밖에 많은 프레임워크에 typescript가 내장되어 있다...

프런트엔드: 각도

백엔드: NestJS

백엔드: FoalTS

첫 번째 변수 입력
인덱스의 현재 내용을 모두 삭제합니다.코드sandbox 컨트롤러를 열면 브라우저 화면을 사용하지 않습니다. 터미널이 모든 공간을 차지할 수 있습니다.변수를 만들어 봅시다!

let myFirstVariable: string = "3"
console.log(myFirstVariable)

변수 이름 뒤에 있는 :string를 주의하십시오. 이것은 우리가 변수에 포함해야 할 내용을 정의합니다.myFirstVariable를 재할당해 보겠습니다.

myFirstVariable = 3
console.log(myFirstVariable)

IDE에 문자열 유형에 숫자를 지정할 수 있는 빨간색 선 오류가 표시됩니다.코드sandbox를 사용하기 때문에 컴파일 오류가 발생하지 않지만, 로컬에서 컴파일하면 같은 오류가 발생합니다.

더 복잡한 유형 입력

어레이
만약 내가 하나의 수조를 가지고 있다면, 나는 이렇게 그것을 입력할 수 있다.

const myArray: [string] = ["Hello", "World"]
console.log(myArray)

이것은 ts myArray가 문자열 그룹이어야 한다는 것을 알려 줍니다. 만약 내가 비 문자열 값을 추가하려고 시도한다면 오류가 발생할 수 있습니다.

myArray.push(5)

만약 숫자와 문자열이 있는 그룹을 원한다면, 우리는 내장된 TS 전의 도안을 사용하여any를 채울 수 있습니다.

const myArray: [any] = ["Hello", "World"]
console.log(myArray)
myArray.push(5)

any 형식은 받아들일 수 있는 모든 내용을 허용하지만, 실제 오류를 포착하는 컴파일 오류나 문법 강조 오류를 포착하는 데 도움이 되지 않습니다.

const myArray: Array<string | number> = ["Hello", "World"]
console.log(myArray)
myArray.push(5)

이 문법은 그룹의 모든 요소가 문자열이나 숫자일 수 있음을 나타낸다.

오브젝트
비클래스 대상에 대해 우리는 새로운 입력 인터페이스를 만들어야 한다. (클래스로 생성된 대상에 대해 클래스는 유형이다.)

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

const Alex: Person = { name: "Alex Merced", age: 35 }

console.log(Alex)

현재 우리가 얻은 오류는 이메일 속성을 잃어버렸다는 것을 알려 줍니다.만약 우리가 전자 우편 속성을 원한다면, 우리는 그것이 선택할 수 있기를 희망합니까?

interface Person {
  name: string
  age: number
  email?: string
}

const Alex: Person = { name: "Alex Merced", age: 35 }

console.log(Alex)

물음표를 추가하면 TS가 속성이 존재할 수 있음을 알 수 있지만 필요하지 않습니다.코드를 사용하는 팀원들에게 필요한 속성은 매우 유용하다. TS는 코드가 정확하게 실행되는 데 필요한 속성을 잊어버릴 때 경고를 보내고, 속성 이름이 유형이 있으면 정확한 유형이 부족하고 유형에 타자 오류가 존재하지 않는다고 불평하기 때문이다.

기능
다음은 유형화 함수의 예이다...

const addNums = (x: number, y: number): number => {
  return x + y
}

console.log(addNums(3, 3))
console.log(addNums(3, "3"))

매개 변수는 모두 입력한 것이고, 되돌아오는 값은 매개 변수의 괄호 밖에서 입력한 것이니 주의하십시오.두 번째 콘솔에서 오류가 있을 것입니다.로그는 숫자가 필요할 때 문자열을 매개 변수로 전달하기 때문입니다.

매거
매거는 상수 집합을 정의할 수 있도록 합니다.값을 지정하지 않으면 값이 순서대로 지정됩니다.이것은 사용자가 사용하기 쉬운 명칭 상수에 직관적이지 않은 값을 분배할 수 있도록 합니다.예를 들어 하나의 상표명으로 하나의 서열 번호를 표시한다.

enum LifeStage {
  baby = 1,
  toddler,
  child,
  teenager,
  adult,
  senior,
}

interface Person {
  name: string
  height: number
  inches: number
  stage: number
}

const Alex: Person = {
  name: "Alex Merced",
  height: 5,
  stage: LifeStage.adult,
  inches: 10,
}

console.log(Alex)

첫 번째 LifeStage에 대한 값만 지정했기 때문에 다른 것은 모두 그것에 비해 번호를 매기기 때문에 로그에 stage의 값은 5로 표시됩니다.만약 내가 첫 번째 값 단계에 대해 번호를 매기지 않았다면, 그것은 4가 될 것이다. 왜냐하면 그것은 0으로 그것들을 매기기 시작하기 때문이다.

사용자 정의 유형
너도 너의 유형을 미리 명명할 수 있다. 그러면 매번 그것들을 인쇄할 필요가 없다.다음은 몇 가지 예다.

type yesno = "yes" | "no"

이것은 yes 또는 no만 문자열 값으로 받아들이는 형식입니다

type weirdarray = [string, number, boolean]

이런 유형은 이 순서대로 배열된 문자열, 숫자, 부울 값의 그룹만 받아들인다.

type error = "network error" | "schema error"
type success = "success"
type response = error | success

여기에 우리는 두 가지 유형을 정의했다. error는 몇 개의 문자열 중 하나여야 하고, success는 success일 수밖에 없다.그리고 우리는 이런 유형 중 어느 것이든지 유형을 만들 수 있다.

type response = error | success
interface data {
  data: Object<any>
}
interface res {
  response: response
}
type APIResponse = data & res

따라서 대상이 APIresponse를 성공적으로 검사하려면 데이터 속성, 즉 모든 속성이 있는 대상과response 유형의 응답 속성이 있어야 한다.

밑줄
Typescript는 Javascript를 진정으로 바꾸지 않았습니다. 코드 라이브러리의 증가와 점점 더 많은 사람들이 코드를 작성하기 때문에 더 빠른 디버깅 과정에서 오류를 줄일 수 있습니다.