From 6e5011a53cc84dc625041f101b9a685a2de2a207 Mon Sep 17 00:00:00 2001 From: Miro Rauhala <4082806+mirorauhala@users.noreply.github.com> Date: Tue, 19 Sep 2023 21:45:52 +0300 Subject: [PATCH] Translate 'Using TypeScript' --- src/content/learn/typescript.md | 166 ++++++++++++++++---------------- 1 file changed, 83 insertions(+), 83 deletions(-) diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index 5695b755f..b18a7a0d4 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -1,57 +1,58 @@ --- -title: Using TypeScript +title: TypeScriptin käyttäminen re: https://github.com/reactjs/react.dev/issues/5960 --- -TypeScript is a popular way to add type definitions to JavaScript codebases. Out of the box, TypeScript [supports JSX](/learn/writing-markup-with-jsx) and you can get full React Web support by adding [`@types/react`](https://www.npmjs.com/package/@types/react) and [`@types/react-dom`](https://www.npmjs.com/package/@types/react-dom) to your project. +TypeScript on suosittu tapa lisätä tyyppimääritteitä JavaScript koodiin. TypeScript [tukee JSX:ää](/learn/writing-markup-with-jsx) ja voit saada täyden React Web tuen lisäämällä [`@types/react`](https://www.npmjs.com/package/@types/react) ja [`@types/react-dom`](https://www.npmjs.com/package/@types/react-dom) projektiisi. -* [TypeScript with React Components](/learn/typescript#typescript-with-react-components) -* [Examples of typing with hooks](/learn/typescript#example-hooks) -* [Common types from `@types/react`](/learn/typescript/#useful-types) -* [Further learning locations](/learn/typescript/#further-learning) +* [TypeScript React komponenteissa](/learn/typescript#typescript-with-react-components) +* [Esimerkkejä koodaamisesta hookkien avulla](/learn/typescript#example-hooks) +* [Yleisiä tyyppejä `@types/react` paketista](/learn/typescript/#useful-types) +* [Osaamisen laajentaminen](/learn/typescript/#further-learning) -## Installation {/*installation*/} +## Asennus {/*installation*/} -All [production-grade React frameworks](https://react-dev-git-fork-orta-typescriptpage-fbopensource.vercel.app/learn/start-a-new-react-project#production-grade-react-frameworks) offer support for using TypeScript. Follow the framework specific guide for installation: +Kaikki [tuotantokäyttöön tarkoitetut React frameworkit](/learn/start-a-new-react-project#production-grade-react-frameworks) tarjoavat tuen TypeScriptin käyttöön. Seuraa frameworkin omaa asennusohjetta: - [Next.js](https://nextjs.org/docs/pages/building-your-application/configuring/typescript) - [Remix](https://remix.run/docs/en/1.19.2/guides/typescript) - [Gatsby](https://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/) - [Expo](https://docs.expo.dev/guides/typescript/) -### Adding TypeScript to an existing React project {/*adding-typescript-to-an-existing-react-project*/} +### TypeScriptin lisääminen olemassa olevaan React projektiin {/*adding-typescript-to-an-existing-react-project*/} -To install the latest version of React's type definitions: +Asentaaksesi uusimman version Reactin tyyppimäärittelyistä: npm install @types/react @types/react-dom -The following compiler options need to be set in your `tsconfig.json`: +Seuraavat compiler-asetukset on oltava asetettuna `tsconfig.json` tiedostossasi: -1. `dom` must be included in [`lib`](https://www.typescriptlang.org/tsconfig/#lib) (Note: If no `lib` option is specified, `dom` is included by default). -1. [`jsx`](https://www.typescriptlang.org/tsconfig/#jsx) must be set to one of the valid options. `preserve` should suffice for most applications. +1. `dom` täytyy olla sisällytettynä [`lib`](https://www.typescriptlang.org/tsconfig/#lib):ssa (Huomaa: Jos `lib` vaihtoehtoa ei ole määritelty, `dom` sisällytetään oletuksena). +2. [`jsx`](https://www.typescriptlang.org/tsconfig/#jsx):n täytyy olla yksi sallituista vaihtoehdoista. `preserve` riittää useimmille sovelluksille. If you're publishing a library, consult the [`jsx` documentation](https://www.typescriptlang.org/tsconfig/#jsx) on what value to choose. + Jos olet julkaisemassa kirjastoa, tutustu [`jsx` dokumentaatioon](https://www.typescriptlang.org/tsconfig/#jsx) mitä arvoa valita. -## TypeScript with React Components {/*typescript-with-react-components*/} +## TypeScript React komponenteissa {/*typescript-with-react-components*/} -Every file containing JSX must use the `.tsx` file extension. This is a TypeScript-specific extension that tells TypeScript that this file contains JSX. +Jokainen tiedosto joka sisältää JSX:ää täytyy käyttää `.tsx` tiedostopäätettä. Tämä on TypeScriptin oma tiedostopääte joka kertoo TypeScriptille että tämä tiedosto sisältää JSX:ää. -Writing TypeScript with React is very similar to writing JavaScript with React. The key difference when working with a component is that you can provide types for your component's props. These types can be used for correctness checking and providing inline documentation in editors. +TypeScriptin kirjoittaminen Reactin kanssa on hyvin samanlaista kuin JavaScriptin kirjoittaminen Reactin kanssa. Suurin ero on että voit määritellä tyypit komponentin propseille. Nämä tyypit voidaan käyttää oikeellisuuden tarkistamiseen ja sisäisen dokumentaation tarjoamiseen editoreissa. -Taking the [`MyButton` component](/learn#components) from the [Quick Start](/learn) guide, we can add a type describing the `title` for the button: +[`MyButton` komponentin](/learn#components) ottaminen [Pika-aloitus](/learn) -oppaasta, voimme lisätä tyypin joka kuvaa `title` propin painikkeelle: @@ -65,8 +66,8 @@ function MyButton({ title }: { title: string }) { export default function MyApp() { return (
-

Welcome to my app

- +

Tervetuloa sovellukseeni

+
); } @@ -80,19 +81,19 @@ export default App = AppTSX; -These sandboxes can handle TypeScript code, but they do not run the type-checker. This means you can amend the TypeScript sandboxes to learn, but you won't get any type errors or warnings. To get type-checking, you can use the [TypeScript Playground](https://www.typescriptlang.org/play) or use a more fully-featured online sandbox. +Nämä hiekkalaatikot tukevat TypeScript koodia, mutta ne eivät aja tyyppitarkistinta. Tämä tarkoittaa että voit muokata TypeScript hiekkalaatikoita oppiaksesi, mutta et saa mitään tyyppivirheitä tai varoituksia. Saadaksesi tyyppitarkistuksen, voit käyttää [TypeScript Playground](https://www.typescriptlang.org/play) tai käyttää enemmän ominaisuuksia sisältävää hiekkalaatikkoa. -This inline syntax is the simplest way to provide types for a component, though once you start to have a few fields to describe it can become unwieldy. Instead, you can use an `interface` or `type` to describe the component's props: +Tämä sisäinen syntaksi on yksinkertaisin tapa määritellä tyypit komponentille, mutta kun sinulla on muutama kenttä kuvattavana, se voi muuttua hankalaksi. Sen sijaan voit käyttää `interface` tai `type` kuvaamaan komponentin propseja: ```tsx App.tsx active interface MyButtonProps { - /** The text to display inside the button */ + /** Teksti jota näytetään painikkeen sisällä */ title: string; - /** Whether the button can be interacted with */ + /** Voiko painiketta käyttää */ disabled: boolean; } @@ -105,8 +106,8 @@ function MyButton({ title, disabled }: MyButtonProps) { export default function MyApp() { return (
-

Welcome to my app

- +

Tervetuloa sovellukseeni

+
); } @@ -119,32 +120,31 @@ export default App = AppTSX; -The type describing your component's props can be as simple or as complex as you need, though they should be an object type described with either a `type` or `interface`. You can learn about how TypeScript describes objects in [Object Types](https://www.typescriptlang.org/docs/handbook/2/objects.html) but you may also be interested in using [Union Types](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#union-types) to describe a prop that can be one of a few different types and the [Creating Types from Types](https://www.typescriptlang.org/docs/handbook/2/types-from-types.html) guide for more advanced use cases. +Tyyppi joka kuvaa komponentin propseja voi olla yhtä yksinkertainen tai monimutkainen kuin tarvitset, mutta niiden tulisi olla objektityyppi joka on kuvattu joko `type` tai `interface` avulla. Voit oppia kuinka TypeScript kuvaa objekteja [Object Types](https://www.typescriptlang.org/docs/handbook/2/objects.html) -oppaasta, mutta saatat olla kiinnostunut käyttämään [Union Types](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#union-types) kuvaamaan propsia joka voi olla yksi monista eri tyypeistä ja [Creating Types from Types](https://www.typescriptlang.org/docs/handbook/2/types-from-types.html) -opas monimutkaisempiin käyttötapauksiin. +## Hookki-esimerkkejä {/*example-hooks*/} -## Example Hooks {/*example-hooks*/} +Tyyppimäärittelyt `@types/react` paketissa sisältävät tyypit sisäänrakennetuille hookkeille, joten voit käyttää niitä komponenteissasi ilman lisäasetuksia. Ne on rakennettu ottamaan huomioon koodi jonka kirjoitat komponenttiisi, joten saat [pääteltyjä tyyppejä](https://www.typescriptlang.org/docs/handbook/type-inference.html) usein ja sinun ei pitäisi tarvita käsitellä yksityiskohtia tyypittämisestä. -The type definitions from `@types/react` include types for the built-in hooks, so you can use them in your components without any additional setup. They are built to take into account the code you write in your component, so you will get [inferred types](https://www.typescriptlang.org/docs/handbook/type-inference.html) a lot of the time and ideally do not need to handle the minutiae of providing the types. - -However, we can look at a few examples of how to provide types for hooks. +Kuitenkin, voimme katsoa muutamia esimerkkejä kuinka tarjota tyyppejä hookkeille. ### `useState` {/*typing-usestate*/} -The [`useState` hook](/reference/react/useState) will re-use the value passed in as the initial state to determine what the type of the value should be. For example: +[`useState` hookki](/reference/react/useState) käyttää uuddelleen arvoa joka annetaan alustavaksi tilaksi määrittääkseen minkä tyyppinen arvo on kyseessä. Esimerkiksi: ```ts -// Infer the type as "boolean" +// Päättele arvoksi "boolean":ksi const [enabled, setEnabled] = useState(false); ``` -Will assign the type of `boolean` to `enabled`, and `setEnabled` will be a function accepting either a `boolean` argument, or a function that returns a `boolean`. If you want to explicitly provide a type for the state, you can do so by providing a type argument to the `useState` call: +Päättelee `enabled` tyypiksi `boolean` ja `setEnabled` on funktio joka hyväksyy joko `boolean` argumentin tai funktion joka palauttaa `boolean` arvon. Jos haluat määrittää tyypin tilalle, voit tehdä sen antamalla tyypin argumentin `useState` kutsulle: ```ts -// Explicitly set the type to "boolean" +// Eksplisiittisesti aseta tyyppi "boolean":ksi const [enabled, setEnabled] = useState(false); ``` -This isn't very useful in this case, but a common case where you may want to provide a type is when you have a union type. For example, `status` here can be one of a few different strings: +Tämä ei ole kovin hyödyllistä tässä tapauksessa, mutta yleinen tapaus jossa haluat määrittää tyypin on kun sinulla on union tyyppi. Esimerkiksi, `status` voi olla yksi monista eri merkkijonoista: ```ts type Status = "idle" | "loading" | "success" | "error"; @@ -152,7 +152,7 @@ type Status = "idle" | "loading" | "success" | "error"; const [status, setStatus] = useState("idle"); ``` -Or, as recommended in [Principles for structuring state](/learn/choosing-the-state-structure#principles-for-structuring-state), you can group related state as an object and describe the different possibilities via object types: +Tai, kuten suositellaan [Tilarakenteiden periaatteissa](/learn/choosing-the-state-structure#principles-for-structuring-state), voit ryhmitellä liittyvän tilan objektiksi ja kuvailla eri mahdollisuudet objektityypeillä: ```ts type RequestState = @@ -166,7 +166,7 @@ const [requestState, setRequestState] = useState({ status: 'idle' ### `useReducer` {/*typing-usereducer*/} -The [`useReducer` hook](/reference/react/useReducer) is a more complex hook that takes a reducer function and an initial state. The types for the reducer function are inferred from the initial state. You can optionally provide a type argument to the `useReducer` call to provide a type for the state, but it is often better to set the type on the initial state instead: +[`useReducer` hookki](/reference/react/useReducer) on monimutkaisempi hookki joka ottaa reduktorifunktion ja alustavan tilan. Tyypit reducer funktiolle päätellään alustavasta tilasta. Voit valinnaisesti antaa tyypin argumentin `useReducer` kutsulle antaaksesi tyypin tilalle, mutta on usein parempi asettaa tyyppi alustavalle tilalle: @@ -202,11 +202,11 @@ export default function App() { return (
-

Welcome to my counter

+

Tervetuloa laskuriini

-

Count: {state.count}

- - +

Laskuri: {state.count}

+ +
); } @@ -221,14 +221,14 @@ export default App = AppTSX; -We are using TypeScript in a few key places: +Käytämme TypeScriptiä muutamassa keskeisessä paikassa: - - `interface State` describes the shape of the reducer's state. - - `type CounterAction` describes the different actions which can be dispatched to the reducer. - - `const initialState: State` provides a type for the initial state, and also the type which is used by `useReducer` by default. - - `stateReducer(state: State, action: CounterAction): State` sets the types for the reducer function's arguments and return value. + - `interface State` kuvaa reduktorin tilan muodon. + - `type CounterAction` kuvaa eri toimintoja jotka voidaan lähettää reduktorille. + - `const initialState: State` tarjoaa tyypin alustavalle tilalle, ja myös tyypin jota `useReducer` käyttää oletuksena. + - `stateReducer(state: State, action: CounterAction): State` asettaa tyypit reduktorifunktion argumenteille ja palautusarvolle. -A more explicit alternative to setting the type on `initialState` is to provide a type argument to `useReducer`: +Eksplisiittisempi vaihtoehto tyypin asettamiseen `initialState`:lle on antaa tyyppi argumentti `useReducer`:lle: ```ts import { stateReducer, State } from './your-reducer-implementation'; @@ -242,9 +242,9 @@ export default function App() { ### `useContext` {/*typing-usecontext*/} -The [`useContext` hook](/reference/react/useContext) is a technique for passing data down the component tree without having to pass props through components. It is used by creating a provider component and often by creating a hook to consume the value in a child component. +[`useContext` hookki](/reference/react/useContext) on tekniikka datan välittämiseen komponenttipuun läpi ilman että tarvitsee välittää propseja komponenttien läpi. Sitä käytetään luomalla tarjoaja komponentti ja usein luomalla hookki arvon käyttöön lapsikomponentissa. -The type of the value provided by the context is inferred from the value passed to the `createContext` call: +Kontekstin tarjoaman arvon tyyppi päätellään arvosta joka annetaan `createContext` kutsulle: @@ -271,7 +271,7 @@ function MyComponent() { return (
-

Current theme: {theme}

+

Nykyinen teema: {theme}

) } @@ -284,22 +284,22 @@ export default App = AppTSX; -This technique works when you have an default value which makes sense - but there are occasionally cases when you do not, and in those cases `null` can feel reasonable as a default value. However, to allow the type-system to understand your code, you need to explicitly set `ContextShape | null` on the `createContext`. +Tämä tekniikka toimii kun sinulla on oletusarvo joka on järkevä - mutta on tapauksia jolloin sitä ei ole, ja näissä tapauksissa `null` voi tuntua järkevältä oletusarvolta. Kuitenkin, jotta tyyppijärjestelmä ymmärtäisi koodisi, sinun täytyy eksplisiittisesti asettaa `ContextShape | null` `createContext`:lle. -This causes the issue that you need to eliminate the `| null` in the type for context consumers. Our recommendation is to have the hook do a runtime check for it's existence and throw an error when not present: +Tämä aiheuttaa ongelman jossa sinun täytyy eliminoida `| null` tyyppi kontekstin kuluttajilta. Suosituksemme on että hookki tekee runtime tarkistuksen sen olemassaolosta ja heittää virheen kun sitä ei ole: ```js {5, 16-20} import { createContext, useContext, useState, useMemo } from 'react'; -// This is a simpler example, but you can imagine a more complex object here +// Tämä on yksinkertaisempi esimerkki, mutta voit kuvitella monimutkaisemman olion tässä type ComplexObject = { kind: string }; -// The context is created with `| null` in the type, to accurately reflect the default value. +// Konteksti luodaan `| null` tyypillä, jotta oletusarvo heijastuu tarkasti. const Context = createContext(null); -// The `| null` will be removed via the check in the hook. +// `| null` tullaan poistamaan tarkistuksen kautta hookissa. const useGetComplexObject = () => { const object = useContext(Context); if (!object) { throw new Error("useGetComplexObject must be used within a Provider") } @@ -321,7 +321,7 @@ function MyComponent() { return (
-

Current object: {object.kind}

+

Nykyinen olio: {object.kind}

) } @@ -329,17 +329,17 @@ function MyComponent() { ### `useMemo` {/*typing-usememo*/} -The [`useMemo`](/reference/react/useMemo) hooks will create/re-access a memorized value from a function call, re-running the function only when dependencies passed as the 2nd parameter are changed. The result of calling the hook is inferred from the return value from the function in the first parameter. You can be more explicit by providing a type argument to the hook. +[`useMemo`](/reference/react/useMemo) hookki luo/uudelleen käyttää muistettua arvoa funktiokutsusta, ajamalla funktiota uudelleen vain kun riippuvuudet jotka on annettu toisena parametrina muuttuvat. Kutsun tulosta päätellään palautusarvosta funktiossa ensimmäisenä parametrina. Voit olla eksplisiittisempi antamalla tyypin argumentin hookille. ```ts -// The type of visibleTodos is inferred from the return value of filterTodos +// visibleTodos:n tyyppi päätellään filterTodos:n palautusarvosta const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]); ``` ### `useCallback` {/*typing-usecallback*/} -The [`useCallback`](/reference/react/useCallback) provide a stable reference to a function as long as the dependencies passed into the second parameter are the same. Like `useMemo`, the function's type is inferred from the return value of the function in the first parameter, and you can be more explicit by providing a type argument to the hook. +[`useCallback`](/reference/react/useCallback) tarjoaa vakaan viitteen funktioon niin kauan kun riippuvuudet jotka on annettu toisena parametrina pysyvät samana. Kuten `useMemo`, funktion tyyppi päätellään funktiosta palautusarvona ensimmäisenä parametrina, ja voit olla eksplisiittisempi antamalla tyypin argumentin hookille. ```ts @@ -348,9 +348,9 @@ const handleClick = useCallback(() => { }, [todos]); ``` -When working in TypeScript strict mode `useCallback` requires adding types for the parameters in your callback. This is because the type of the callback is inferred from the return value of the function, and without parameters the type cannot be fully understood. +Kun työskentelet TypeScriptin strict-moodissa `useCallback` vaatii lisäämään tyypit parametreille callbackissasi. Tämä johtuu siitä että callbackin tyyppi päätellään funktion palautusarvosta, ja ilman parametreja tyyppiä ei voida ymmärtää täysin. -Depending on your code-style preferences, you could use the `*EventHandler` functions from the React types to provide the type for the event handler at the same time as defining the callback: +Riippuen koodityylistäsi, voit käyttää `*EventHandler` funktioita Reactin tyypeistä tarjotaksesi tyypin tapahtumankäsittelijälle samaan aikaan kun määrittelet callbackin: ```ts import { useState, useCallback } from 'react'; @@ -371,13 +371,13 @@ export default function Form() { } ``` -## Useful Types {/*useful-types*/} +## Hyödyllisiä tyyppejä {/*useful-types*/} -There is quite an expansive set of types which come from the `@types/react` package, it is worth a read when you feel comfortable with how React and TypeScript interact. You can find them [in React's folder in DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts). We will cover a few of the more common types here. +`@types/react` paketissa on melko laaja joukko tyyppejä, on hyvä lukea ne kun tunnet olosi mukavaksi kuinka React ja TypeScript toimivat yhdessä. Voit löytää ne [Reactin kansiossa DefinitelyTypedissä](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts). Käydään läpi muutamia yleisimpiä tyyppejä tässä. -### DOM Events {/*typing-dom-events*/} +### DOM tapahtumat {/*typing-dom-events*/} -When working with DOM events in React, the type of the event can often be inferred from the event handler. However, when you want to extract a function to be passed to an event handler, you will need to explicitly set the type of the event. +Kun työskentelet DOM tapahtumien kanssa Reactissa, tapahtuman tyyppi voidaan usein päätellä tapahtumankäsittelijästä. Kuitenkin, kun haluat eristää funktion joka annetaan tapahtumankäsittelijälle, sinun täytyy eksplisiittisesti asettaa tapahtuman tyyppi. @@ -394,7 +394,7 @@ export default function Form() { return ( <> -

Value: {value}

+

Arvo: {value}

); } @@ -407,15 +407,15 @@ export default App = AppTSX; -There are many types of events provided in the React types - the full list can be found [here](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/b580df54c0819ec9df62b0835a315dd48b8594a9/types/react/index.d.ts#L1247C1-L1373) which is based on the [most popular events from the DOM](https://developer.mozilla.org/en-US/docs/Web/Events). +On monia eri tapahtumia, joita Reactin tyypit tarjoaa - täydellinen lista löytyy [täältä](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/b580df54c0819ec9df62b0835a315dd48b8594a9/types/react/index.d.ts#L1247C1-L1373) joka perustuu [suosituimpiin tapahtumiin DOM:issa](https://developer.mozilla.org/en-US/docs/Web/Events). -When determining the type you are looking for you can first look at the hover information for the event handler you are using, which will show the type of the event. +Kun etsit tyyppiä, voit ensin katsoa hover tiedot tapahtumankäsittelijälle jota käytät, joka näyttää tapahtuman tyypin. -If you need to use an event that is not included in this list, you can use the `React.SyntheticEvent` type, which is the base type for all events. +Jos sinun täytyy käyttää tapahtumaa jota ei ole tässä listassa, voit käyttää `React.SyntheticEvent` tyyppiä, joka on kaikkien tapahtumien perustyypi. ### Children {/*typing-children*/} -There are two common paths to describing the children of a component. The first is to use the `React.ReactNode` type, which is a union of all the possible types that can be passed as children in JSX: +On kaksi yleistä tapaa kuvailla komponentin lapsia. Ensimmäinen on käyttää `React.ReactNode` tyyppiä, joka on unioni kaikista mahdollisista tyypeistä jotka voidaan antaa lapsina JSX:ssä: ```ts interface ModalRendererProps { @@ -424,7 +424,7 @@ interface ModalRendererProps { } ``` -This is a very broad definition of children. The second is to use the `React.ReactElement` type, which is only JSX elements and not JavaScript primitives like strings or numbers: +Tämä on hyvin laaja määritelmä lapsille. Toinen tapa on käyttää `React.ReactElement` tyyppiä, joka on vain JSX elementtejä eikä JavaScript primitiivejä kuten merkkijonoja tai numeroita: ```ts interface ModalRendererProps { @@ -433,13 +433,13 @@ interface ModalRendererProps { } ``` -Note, that you cannot use TypeScript to describe that the children are a certain type of JSX elements, so you cannot use the type-system to describe a component which only accepts `
  • ` children. +Huomaa, että et voi käyttää TypeScriptiä kuvaamaan että lapset ovat tietyn tyyppisiä JSX elementtejä, joten et voi käyttää tyyppijärjestelmää kuvaamaan komponenttia joka hyväksyy vain `
  • ` lapsia. -You can see all an example of both `React.ReactNode` and `React.ReactElement` with the type-checker in [this TypeScript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wChSB6CxYmAOmXRgDkIATJOdNJMGAZzgwAFpxAR+8YADswAVwGkZMJFEzpOjDKw4AFHGEEBvUnDhphwADZsi0gFw0mDWjqQBuUgF9yaCNMlENzgAXjgACjADfkctFnYkfQhDAEpQgD44AB42YAA3dKMo5P46C2tbJGkvLIpcgt9-QLi3AEEwMFCItJDMrPTTbIQ3dKywdIB5aU4kKyQQKpha8drhhIGzLLWODbNs3b3s8YAxKBQAcwXpAThMaGWDvbH0gFloGbmrgQfBzYpd1YjQZbEYARkB6zMwO2SHSAAlZlYIBCdtCRkZpHIrFYahQYQD8UYYFA5EhcfjyGYqHAXnJAsIUHlOOUbHYhMIIHJzsI0Qk4P9SLUBuRqXEXEwAKKfRZcNA8PiCfxWACecAAUgBlAAacFm80W-CU11U6h4TgwUv11yShjgJjMLMqDnN9Dilq+nh8pD8AXgCHdMrCkWisVoAet0R6fXqhWKhjKllZVVxMcavpd4Zg7U6Qaj+2hmdG4zeRF10uu-Aeq0LBfLMEe-V+T2L7zLVu+FBWLdLeq+lc7DYFf39deFVOotMCACNOCh1dq219a+30uC8YWoZsRyuEdjkevR8uvoVMdjyTWt4WiSSydXD4NqZP4AymeZE072ZzuUeZQKheQgA). +Näet esimerkin sekä `React.ReactNode`:sta että `React.ReactElement`:sta tyyppitarkistuksella [tässä TypeScript hiekkalaatikossa](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wChSB6CxYmAOmXRgDkIATJOdNJMGAZzgwAFpxAR+8YADswAVwGkZMJFEzpOjDKw4AFHGEEBvUnDhphwADZsi0gFw0mDWjqQBuUgF9yaCNMlENzgAXjgACjADfkctFnYkfQhDAEpQgD44AB42YAA3dKMo5P46C2tbJGkvLIpcgt9-QLi3AEEwMFCItJDMrPTTbIQ3dKywdIB5aU4kKyQQKpha8drhhIGzLLWODbNs3b3s8YAxKBQAcwXpAThMaGWDvbH0gFloGbmrgQfBzYpd1YjQZbEYARkB6zMwO2SHSAAlZlYIBCdtCRkZpHIrFYahQYQD8UYYFA5EhcfjyGYqHAXnJAsIUHlOOUbHYhMIIHJzsI0Qk4P9SLUBuRqXEXEwAKKfRZcNA8PiCfxWACecAAUgBlAAacFm80W-CU11U6h4TgwUv11yShjgJjMLMqDnN9Dilq+nh8pD8AXgCHdMrCkWisVoAet0R6fXqhWKhjKllZVVxMcavpd4Zg7U6Qaj+2hmdG4zeRF10uu-Aeq0LBfLMEe-V+T2L7zLVu+FBWLdLeq+lc7DYFf39deFVOotMCACNOCh1dq219a+30uC8YWoZsRyuEdjkevR8uvoVMdjyTWt4WiSSydXD4NqZP4AymeZE072ZzuUeZQKheQgA). -### Style Props {/*typing-style-props*/} +### Tyylipropsit {/*typing-style-props*/} -When using inline styles in React, you can use `React.CSSProperties` to describe the object passed to the `style` prop. This type is a union of all the possible CSS properties, and is a good way to ensure you are passing valid CSS properties to the `style` prop, and to get auto-complete in your editor. +Kun käytät inline-tyylejä Reactissa, voit käyttää `React.CSSProperties` kuvaamaan objektia joka annetaan `style` propille. Tämä tyyppi on unioni kaikista mahdollisista CSS ominaisuuksista, ja on hyvä tapa varmistaa että annat oikeellisia CSS ominaisuuksia `style` propille, ja saadaksesi automaattisen täydennyksen editoriisi. ```ts interface MyComponentProps { @@ -447,17 +447,17 @@ interface MyComponentProps { } ``` -## Further learning {/*further-learning*/} +## Osaamisen laajentaminen {/*further-learning*/} -This guide has covered the basics of using TypeScript with React, but there is a lot more to learn. -Individual API pages on the docs may contain more in-depth documentation on how to use them with TypeScript. +Tämä opas on käsitellyt TypeScriptin käyttöä Reactin kanssa, mutta on paljon enemmän opittavaa. +Yksittäiset API sivut dokumentaatiossa voivat sisältää syvällisempää dokumentaatiota kuinka käyttää niitä TypeScriptin kanssa. -We recommend the following resources: +Suosittelemme seuraavia resursseja: - - [The TypeScript handbook](https://www.typescriptlang.org/docs/handbook/) is the official documentation for TypeScript, and covers most key language features. + - [The TypeScript handbook](https://www.typescriptlang.org/docs/handbook/) on virallinen dokumentaatio TypeScriptille, ja kattaa suurimman osan tärkeimmistä ominaisuuksista. - - [The TypeScript release notes](https://devblogs.microsoft.com/typescript/) covers a each new features in-depth. + - [The TypeScript release notes](https://devblogs.microsoft.com/typescript/) kattaa jokaisen uuden ominaisuuden syvällisesti. - - [React TypeScript Cheatsheet](https://react-typescript-cheatsheet.netlify.app/) is a community-maintained cheatsheet for using TypeScript with React, covering a lot of useful edge cases and providing more breadth than this document. + - [React TypeScript Cheatsheet](https://react-typescript-cheatsheet.netlify.app/) on yhteisön ylläpitämä lunttilappu TypeScriptin käyttöön Reactin kanssa, kattaa paljon hyödyllisiä reunoja ja tarjoaa enemmän syvyyttä kuin tämä dokumentti. - - [TypeScript Community Discord](https://discord.com/invite/typescript) is a great place to ask questions and get help with TypeScript and React issues. \ No newline at end of file + - [TypeScript Community Discord](https://discord.com/invite/typescript) on hyvä paikka kysyä kysymyksiä ja saada apua TypeScriptin ja Reactin ongelmiin. \ No newline at end of file